/* components/range-slider/range-slider.wxss */
.range-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8rpx;
  border-radius: 4rpx;
  margin: 48rpx 0;
  background-color: #58da73;

  .controller {
    width: 40rpx;
    height: 40rpx;
    box-sizing: border-box;
    border: 8rpx solid #ffffff;
    background-color: #58da73;
    border-radius: 50%;
    box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, .08);
  }

}

slider {
  flex: 1;
}

.component-slider {
  width: 90%;
  position: relative;
  margin: 0rpx auto 0rpx;
  padding: 70rpx 0 70rpx;
}

/* 盒子 */
.slider-box {
  width: 88%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 未选中区线 */
.slider-line {
  width: 100%;
  height: 10rpx;
  background: rgba(91, 150, 246, 0.1);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 选中区线 */
.slider-line-active {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 10rpx;
  background: #5B96F6;
}

/* slider按钮 */
.slider-btn {
  width: 70rpx;
  height: 35rpx;
  background: #5B96F6;
  border-radius: 20rpx;
}

/* 显示的数字 */
.slider-number {
  width: 100%;
  position: absolute;
  bottom: -10rpx;
}

.slider-number text {
  position: absolute;
  top: 0;
  font-size: 24rpx;
  color: #999999;
  transition: all 0.3s;
}

/* 当前选中的数字 */
.slider-number text.active {
  font-size: 32rpx;
  color: #5B96F6;
  transition: all 0.3s;
}

/* slider组件设置透明 */
// slider {
//   opacity: 0;
// }